<script setup>
import { computed } from 'vue';

const props = defineProps({
  list: Array,
  default: () => []
})

const leftCount = computed(
  () => {
    return props.list.filter(v => !v.done).length
  }
)
</script>

<template>
  <footer class="footer">
    <span class="todo-count"><strong>{{leftCount}}</strong> item left</span>
    <ul class="filters">
      <li>
        <a class="selected" href="#/">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed">Clear completed</button>
  </footer>
</template>

<style lang="less" scoped>

</style>
